<template>
  <div class="an-home-page">


    <head-input ></head-input>

    <swiper :list="demo01_list" height="120px"
            :auto="true"
            v-model="demo01_index"
            :show-desc-mask="false"
            @on-index-change="demo01_onIndexChange">
    </swiper>

    <group-title>我的应用</group-title>
    <grid  :cols="4" :show-lr-borders="false" :show-vertical-dividers="false" >
      <grid-item :label="item.title" @on-item-click="onItemClick(item.hrefurl)"  v-for="item in icodata" :key="item.id">
        <img slot="icon" :src="item.icourl">
      </grid-item>
    </grid>

    <card :header="{title: cartil }">
      <div slot="content" class="card-padding">
        <flexbox :gutter="0" wrap="wrap" >
          <flexbox-item class="vux-1px-b" :span="1/2" v-for="item in hotImg" :key="item.id">
            <div class="shop-index vux-1px-r ">
              <img :src="item.url">
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </card>

    <!--<divider>{{floormsg}}</divider>-->
  </div>
</template>



<script>
  import { Swiper, Box, XButton, Divider, Grid, GridItem, GroupTitle,Card,Flexbox,FlexboxItem   } from 'vux'
  import headInput from '@/components/headInput'
  //动态加载图片路径的两种方法

  const baseList = [{
    url: 'javascript:',
    img: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3722566108,5845045&fm=200&gp=0.jpg',
    title: ''
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: ''
  }, {
    url: 'javascript:',
    img: 'https://static.vux.li/demo/5.jpg', // 404
    title: '',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }];

  export default {
    name:'home',
    components: {
      headInput,
      Swiper,
      Box,
      XButton,
      Divider,
      Grid,
      GridItem,
      GroupTitle,
      Card,
      Flexbox,
      FlexboxItem,
    },
    data () {
      return {
        msg: '首页',
        floormsg:'底部',
        demo01_list: baseList,
        demo01_index: 0,
        cartil:'推荐',
        carfotil:'查看更多',
        icodata:[
          {
            id:1,
            title:'米面粮油',
            icourl:require('@/assets/img/oil.png'),
            hrefurl:'shopSelect'
          },{
            id:2,
            title:'新鲜蔬菜',
            icourl:require('@/assets/img/vage.png'),
            hrefurl:'chart'
          },{
            id:3,
            title:'休闲酒饮',
            icourl:require('@/assets/img/wine.png'),
            hrefurl:'news'
          },{
            id:4,
            title:'优惠券',
            icourl:require('@/assets/img/tag.png'),
            hrefurl:'#'
          },{
            id:5,
            title:'肉禽',
            icourl:require('@/assets/img/meat.png'),
            hrefurl:'#'
          },{
            id:6,
            title:'充值省钱',
            icourl:require('@/assets/img/money.png'),
            hrefurl:'#'
          },{
            id:7,
            title:'调料干货',
            icourl:require('@/assets/img/tiaoliao.png'),
            hrefurl:'page'
          },{
            id:8,
            title:'方便菜',
            icourl:require('@/assets/img/cai.png'),
            hrefurl:'bar'
          },
        ],
        hotImg:[{
            link:'',
            url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=154467156,4255237251&fm=26&gp=0.jpg'
          },{
            link:'',
            url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3004390697,1933844379&fm=26&gp=0.jpg'
          },{
            link:'',
            url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3164585973,2416935404&fm=200&gp=0.jpg'
          },{
            link:'',
            url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1611700485,549499885&fm=200&gp=0.jpg'
          }
        ]
      }
    },
    methods: {
      demo01_onIndexChange (index) {
        this.demo01_index = index
      },
      onItemClick:function (value) {
        console.log(value);
        this.$router.push(value)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';
  img{
    width: 100%;
  }
  .vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-swiper-desc{
    box-sizing:initial;
  }
  .weui-grids{
    background: #ffffff;
    .weui-grid{
      padding:5px 10px;
      &:after{
        border-bottom: none;
      }
    }
  }
  .shop-index{
    height: 125px;
    img{
      max-height: 100%;
    }
  }

</style>
